<template>
  <div class="page flex-col">
    <!-- 导航开始 -->
    <div id="hhh">
      <section id="home">
        <div id="hea">
          <div id="header" v-cloak>

            <div>
              <img style="width: 187px;height:61px;" src="../assets/images/logo2.png" />
            </div>

            <div class="menu">

              <div class="menu-item " @click="toUrl('home')" :class="[nowPath == 'home' ? 'active' : '']">
                首页
              </div>

              <div class="menu-item " @click="toUrl('xqrz')" :class="[nowPath == 'xqrz' ? 'active' : '']">
                小区入住
              </div>

              <div class="menu-item" @click="toUrl('dljm')" :class="[nowPath == 'becomedev' ? 'active' : '']">
                代理加盟
              </div>

              <div class="menu-item" @click="toUrl('gywm')" :class="[nowPath == 'gywm' ? 'active' : '']">
                关于我们
              </div>

              <div class="menu-item" @click="toUrl('lxwm')" :class="[nowPath == 'lxwm' ? 'active' : '']">
                联系我们
              </div>

            </div>

          </div>
        </div>
      </section>

      <div class="bjdw">
        <img class="wzbj" src="../assets/images/b11.png" />
        <div class="ggywo center " @click="toUrl('gywm')">关于我们 > </div>
        <img style="width: 100%;height: 618px;margin-top: 60px;z-index: 1;" src="../assets/images/top-back.png" />
      </div>
    </div>
    <!-- 导航结束 -->


    <section id="xqrz">
    </section>
    <div id="page" v-cloak>



      <div class="column_c center" style="margin-top: 116px;">
        <div class="zly">小区入住</div>
        <div class="zly-info">Community check-in</div>
      </div>

      <div class="center">
        <div class="row_a_c center" style="width: 50%">

       <!--   <div class="x0 column_c center">
            <img class="xxx" src="../assets/images/xxx.png">
          </div>s
          -->

          <div class="x0 column_c center">
            <div class="xxxw" @mouseover.stop="showA = true" @mouseleave.stop="showA = false">
              <img class="xxx" src="../assets/images/xxx222.png">
              <div class="mss" v-if="showA"></div>
              <div class="infa column_c" v-if="showA">
                <div class="xiaoqu">有法必依</div>
                <div class="huaxian"></div>
                <div class="zyzh">战略合作伙伴</div>
                <div class="xxyq">北京律师事务所</div>
                <div class="aqkk ws" style="white-space: nowrap; ">成立高效、规范的业委会</div>
              </div>
            </div>
          </div>

          <div class="x0 column_c center">
            <div class="xxxw" @mouseover.stop="showB = true" @mouseleave.stop="showB = false">
              <img class="xxx2" src="../assets/images/xxx2.png">
              <div class="mss" v-if="showB"></div>
              <div class="infb column_c" v-if="showB">
                <div class="xiaoqu">小区简介</div>
                <div class="huaxian"></div>
                <div class="zyzh">资源整合</div>
                <div class="xxyq">信息详细</div>
                <div class="aqkk">安全可靠</div>
              </div>
            </div>
          </div>


          <div class="x0 column_c center">
            <div class="xxxw" @mouseover.stop="showC = true" @mouseleave.stop="showC = false">
              <img class="xxx" src="../assets/images/xxx3.png">
              <div class="mss" v-if="showC"></div>
              <div class="infc column_c" v-if="showC">
                <div class="xiaoqu">业主安心</div>
                <div class="huaxian"></div>
                <div class="zyzh">特色的托管服务</div>
                <div class="xxyq">完善的评分系统</div>
                <div class="aqkk ws" style="white-space: nowrap; ">方便监督物管公司</div>
              </div>
            </div>
          </div>


          <div class="x0 column_c center">
            <div class="xxxw" @mouseover.stop="showD = true" @mouseleave.stop="showD = false">
              <img class="xxx" src="../assets/images/xxx6.png">
              <div class="mss" v-if="showD"></div>
              <div class="infd column_c" v-if="showD">
                <div class="xiaoqu">合作共赢</div>
                <div class="huaxian"></div>
                <div class="zyzh">业主的力量:推动</div>
                <div class="xxyq">小区发展的关键一步</div>
              </div>
            </div>
          </div>




<!--
          <div class="x0 column_c center">
            <div>
              <img class="xxx" src="../assets/images/xxx3.png">
            </div>
          </div>

          <div class="x0 column_c center">
            <div>
              <img class="xxx" src="../assets/images/xxx6.png">
            </div>
          </div> -->

        </div>
      </div>


      <section id="dljm">
        <div class="center">
          <div class=" column_c itme2">

            <div class="column_c center" style="margin-top: 116px;">
              <div class="zly">代理加盟</div>
              <div class="zly-info">Agent franchise</div>
            </div>

            <div class="row_a_c dljmimg center">
              <img class="bb1" src="../assets/images/b1.png">
              <img class="bj" src="../assets/images/bj.png">
              <img class="bb1" src="../assets/images/b2.png">
              <img class="bj" src="../assets/images/bj.png">
              <img class="bb1" src="../assets/images/b3.png">
            </div>
          </div>
        </div>
      </section>


      <section id="gywm">
      </section>
      <div class="column_c center" style="margin-top: 116px;">
        <div class="zly">关于我们</div>
        <div class="zly-info">about as</div>
      </div>

      <div class="center">
        <div class="gsjst center">
          <div class="row_a_c " style="margin-top: 90px;">
            <div class="gsjs">
              <div>智盟社区APP使用了阿里云的存储服务，具备较高的安全性和稳定性，能够为应用的数据提供可靠的存储保障。为了确保隐私得到很好的保护，智盟社区APP采用了阿里云存储平台，应用自身的设计、数据加密机制、访问控制策略、合规性处理等多个方面都有效得到了提升。</div>
              <div style="margin-top: 30px;">智盟社区APP用阿里云提供了强大的基础设施和安全措施，但应用开发者遵循严格的安全标准和最佳实践，以全面保护用户的隐私。同时，用户在使用任何应用时，也应该对自己的隐私保护保持一定的关注和警惕。小区为业主考虑使用智盟社区 APP 让小区环境，小区和谐更进一步，智盟社区APP公平公正，让小区业主合理建议第一提倡。</div>
            </div>
            <img class="g1" src="../assets/images/g1.png">
            <img class="g2" src="../assets/images/g2.png">
          </div>
        </div>
      </div>



      <div class="center">
        <div class="bot">
          <section id="lxwm">
          </section>
          <div class="column_c center" style="padding-top: 100px;margin-bottom: 100px;">
            <div class="zly">联系我们</div>
            <div class="zly-info">contact us</div>
          </div>

          <div class="row center">
            <img class="lxwm" src="../assets/images/lxwm.png">

            <div class="lxxx">

              <div class="name">杨先生</div>
              <div class="tela">电话<span class="telb">135-0944-2833 </span></div>
              <div class="adda">地址<span class="arrb">重庆市江北区鹞子丘路68号2幢28-13</span></div>

              <div class="column_c" style="width: 300px;">
                <div class="center erwk">
                  <img class="erwima" src="../assets/images/erwima.png">
                </div>
                <div class="column_c" style="width: 160px;margin-top: 15px;">
                  <div class="smewm">扫描二维码</div>
                  <div class="tlxwm">联系我们</div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>



    </div>










  </div>
</template>






<script>
  import Navv from "@/components/Navv";

  export default {
    name: "Login",
    data() {
      return {
        showA: false,
        showB: false,
        showC: false,
        showD: false,
        nowPath: 'home'
      }
    },
    methods: {

      toUrl(sectionId) {
        this.nowPath = sectionId;
        // 获取目标元素的引用

        var element = document.getElementById(sectionId);
        // 确保元素存在
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });

        }

      },

    }


  };
</script>
<style scoped lang="scss">
  #hea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #page {
    width: 100%;
    background: #ffffff;

    a {
      text-decoration: none;
      color: inherit;
    }


    a:hover {
      text-decoration: underline;
      color: #f00;
    }

    .zly {
      font-weight: bold;
      font-size: 34px;
      color: #0AC7A7;
      text-shadow: 4px 3px 6px rgba(0, 0, 0, 0.09);
      background: linear-gradient(144deg, #65E3CE 0%, #0AC7A7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .zly-info {

      font-weight: 400;
      font-size: 12px;
      color: #989898;

    }

    .x0 {
      width: 300px;
      margin-top: 150px;
      margin-right: 20px;

    }

    .x1 {
      width: 180px;
      height: 180px;
    }

    .xxx {
      width: 285px;
      height: 416px;
    }

    .xxxw {
      width: 285px;
      height: 416px;
      position: relative;
    }

    .mss {
      width: 285px;
      height: 416px;
      background: #0AC7A7;
      border-radius: 18px;
      opacity: 0.9;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
    }

    .infa {
      position: absolute;
      top: 90px;
      left: 45px;
      z-index: 200;
    }


    .infb {
      position: absolute;
      top: 90px;
      left: 90px;
      z-index: 200;
    }

    .infc {
      position: absolute;
      top: 90px;
      left: 65px;
      z-index: 200;
    }

    .infd {
      position: absolute;
      top: 90px;
      left: 65px;
      z-index: 200;
    }

    .xxx2 {
      width: 285px;
      height: 416px;
      z-index: 10 !important;


    }

    .xiaoqu {

      font-weight: bold;
      font-size: 24px;
      color: #F6F6F6;
    }

    .huaxian {
      width: 26px;
      height: 6px;
      background: #F6F6F6;
      margin-top: 45px;
      margin-bottom: 45px;
    }

    .zyzh {

      font-weight: 300;
      font-size: 18px;
      color: #F6F6F6;
      margin-bottom: 20px;
    }

    .xxyq {
      font-weight: 300;
      font-size: 18px;
      color: #F6F6F6;
      margin-bottom: 20px;
    }

    .aqkk {
      font-weight: 300;
      font-size: 18px;
      color: #F6F6F6;
    }

    .p1 {
      font-weight: bold;
      font-size: 24px;
      color: #191414;
      margin-top: 42px;
    }

    .p2 {
      margin-top: 20px;
      font-weight: 400;
      font-size: 18px;
      color: #606060;
      line-height: 16px;
    }

    .p3 {
      margin-top: 20px;
      font-weight: 400;
      font-size: 18px;
      color: #606060;
      line-height: 16px;
    }

    .itme2 {
      width: 100%;
      //background: red;
      height: 776px;
      margin-top: 180px;
      position: relative;
      padding: 50px;

      // background: url("./images/a1.png");
      background: url("../assets/images/a1.png");
      background-repeat: no-repeat;
      /* 背景不重复显示 */
      background-size: cover;
      /* 横向全部显示，可能部分纵向不显示完整 */
    }

    .a2 {
      position: absolute;
      width: 460px;
      height: 428px;
      bottom: 0px;
      right: -10px;
    }


    .gg {
      width: 43px;
      height: 43px;
    }

    .xw {
      white-space: nowrap;
      font-weight: bold;
      font-size: 36px;
      color: #FFFFFF;
      margin-left: 20px;

    }

    .xing {
      position: absolute;
      top: 100px;
      width: 75%;
      left: 200px;
      height: 1px;
      background: #FFFFFF;
      opacity: 0.7;
    }

    .gd {
      width: 141px;
      height: 48px;
      background: #E47B5C;


      font-weight: bold;
      font-size: 24px;
      color: #FFFFFF;
    }

    .title {

      font-weight: 400;
      font-size: 24px;
      color: #000000;
    }

    .time {

      font-weight: 400;
      font-size: 24px;
      color: #000000;
      //margin-bottom: 36px;
    }

    .game {
      width: 430px;
      height: 233px;

    }


    .titleg {
      font-weight: bold;
      font-size: 30px;
      color: #000000;
      margin-top: 50px;
    }

    .timeg {
      font-weight: 400;
      font-size: 24px;
      color: #343434;
      margin-top: 40px;

    }

    .infog {
      font-weight: 400;
      font-size: 20px;
      color: #000000;
      line-height: 36px;

      margin-top: 25px;
    }


    .tt2 {
      margin-bottom: 30px;
    }

    .itme3 {
      width: 65%;
      min-height: 600px;
      margin-top: 180px;
      position: relative;
      padding: 50px;
      margin-bottom: 120px;
      // background: url("../images/a1.png");

      background: url("../assets/images/a1.png");

      background-repeat: no-repeat;
      /* 背景不重复显示 */
      background-size: cover;
      /* 横向全部显示，可能部分纵向不显示完整 */
    }

    .bb1 {
      width: 196px;
      height: 226px;
      margin-right: 80px;
    }

    .bj {
      width: 25px;
      height: 43px;
      margin-right: 80px;
    }

    .dljmimg {
      margin-top: 110px;
      width: 40%;
    }

    .gsjst {
      width: 60%;

    }

    .gsjs {
      width: 574px;
      height: 342px;
      font-family: Source Han Sans CN;
      font-weight: 300;
      font-size: 18px;
      color: #666666;
      line-height: 36px;
      margin-right: 30px;
    }

    .g1 {
      width: 288px;
      height: 363px;
      margin-right: 30px;
    }

    .g2 {
      width: 288px;
      height: 363px;
    }

    .bot {
      width: 100%;
      min-height: 838px;
      background: #F6F6F6;
      margin-top: 110px;

    }

    .lxwm {
      width: 550px;
      height: 500px;
    }

    .lxxx {
      width: 550px;
      height: 470px;
      background: #ffffff;
      padding: 30px 50px 0 50px;
    }

    .erwk {
      width: 153px;
      height: 153px;
      border: 1px solid #D7D7D7;
      margin-top: 38px;
    }

    .erwima {
      width: 130px;
      height: 130px;
    }

    .name {

      font-weight: bold;
      font-size: 30px;
      color: #1A1A1A;

    }

    .tela {

      font-weight: 400;
      font-size: 20px;
      color: #989898;
      margin-top: 38px;

    }

    .telb {

      font-weight: 400;
      font-size: 20px;
      color: #1A1A1A;
      margin-left: 25px;

    }

    .adda {

      font-weight: 400;
      font-size: 20px;
      color: #989898;
      margin-top: 38px;

    }

    .arrb {

      font-weight: 400;
      font-size: 20px;
      color: #1A1A1A;
      margin-left: 25px;

    }

    .smewm {
      font-weight: 300;
      font-size: 18px;
      color: #989898;

    }

    .tlxwm {
      font-weight: 300;
      font-size: 18px;
      color: #989898;
      margin-top: 5px;
    }


  }

  #hea {
    background: #ffffff;
    width: 100%;


    #header {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      height: 116px;
      max-width: 1500px;
      margin: auto;
      padding: 0 200px;
      z-index: 10000 !important;

      .logo {
        width: 188px;
        height: 60px;
        background: url("../assets/images/logo2.png") no-repeat center center;
        background-size: cover;
      }

      .menu {
        display: flex;
        align-items: center;
        margin-left: 80px;

        .menu-item {
          flex-shrink: 0;
          margin-right: 50px;
          color: #666666;
          cursor: pointer;
          font-size: 20px;

          &:hover,
          &.active {
            color: #000000;
            font-size: 20px;
            font-weight: 800;

          }
        }
      }
    }
  }

  .active {
    color: #FF7C59;
  }

  .bjdw {
    width: 100%;
    height: 782px;
    position: relative;
  }

  .ggywo {
    width: 210px;
    height: 60px;
    background: #FE6F21;
    border-radius: 10px;
    position: absolute;
    cursor: pointer;
    color: #ffffff;
    top: 530px;
    left: 20%;
    z-index: 200;
    font-size: 20px;
  }

  .wzbj {
    width: 690px;
    height: 420px;
    position: absolute;
    top: 170px;
    left: 20%;
    z-index: 100;
  }



  /* 布局 */
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  //横对齐
  .row_a_c {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .row-flow {
    display: flex;
    flex-flow: row wrap;
  }

  .column {
    display: flex;
    flex-direction: column;
  }

  //竖对齐
  .column_c {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // 两端对齐
  .space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  //右对齐
  .justify_content_end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }


  footer {
    width: 100%;
    height: 70px;
    background: #E38F6A;

    #footer {

      .advice {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-weight: 400;
        font-size: 18px;
        color: #000000;

      }
    }
  }
</style>
